<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-evaluate-container`]">
      <view class="card">
        <view class="top">
          <view class="date">{{ cleanDetail.create_time }}</view>
          <view class="date-value">保洁服务</view>
        </view>
        <view class="bottom">
          <image :src="cleanDetail.cover"></image>
          <view class="detail">
            <view class="project">{{ cleanDetail.project_name }}</view>
            <view class="name">保洁房间：{{ cleanDetail.room_name }}</view>
            <view class="date">提交时间：{{ cleanDetail.evaluate_time }}</view>
          </view>
        </view>
      </view>
      <view class="evalution-list">
        <view class="tag-item" v-if="cleanDetail.evaluate_status == 0">
          <image :src="$CDN('/customer/static/images/png/good-active.png')" title="好-active"></image>
          <view class="name">满意</view>
        </view>
        <view class="tag-item" v-if="cleanDetail.evaluate_status == 1">
          <image :src="$CDN('/customer/static/images/png/bad-active.png')" title="不好-active"></image>
          <view class="name">不满意</view>
        </view>
        <view class="user_content">建议内容：{{ cleanDetail.content }}</view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getCleanDetail } from '../api'
export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      id: '',
      cleanDetail: {},
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    // this.id = option.id
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      console.log('this.$Route.query.id', this.$Route.query.id)
      let query = {
        id: this.$Route.query.id,
      }
      let { data } = await getCleanDetail(query)
      console.log('data', data)
      this.cleanDetail = data.detail
      // for (let key in this.cardForm) {
      //   this.cardForm[key] = data[key]
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('evaluate-container')} {
  box-sizing: border-box;
  padding: 60rpx 30rpx;
  overflow: hidden;
  .card {
    box-sizing: border-box;
    border-radius: 8rpx;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
    .top {
      box-sizing: border-box;
      padding: 15rpx;
      font-size: 24rpx;
      margin: 0 30rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #f1f1f1;
    }
    .bottom {
      box-sizing: border-box;
      padding: 30rpx;
      display: flex;
      image {
        width: 150rpx;
        height: 150rpx;
        margin-right: 50rpx;
      }
      .detail {
        font-size: 26rpx;
        .project {
          font-weight: 300;
          color: black;
          margin-top: 15rpx;
        }
        .name {
          color: #686868;
          margin-top: 15rpx;
        }
        .date {
          font-size: 24rpx;
          color: #a2a2a2;
          margin-top: 15rpx;
        }
      }
    }
  }
  .evalution-list {
    box-sizing: border-box;
    border-bottom: 2rpx solid #f1f1f1;
    overflow: hidden;
    padding: 20rpx 0;
    display: flex;
    flex-wrap: wrap;
    .tag-item {
      margin-left: 10px;
      margin-bottom: 10px;
      image {
        width: 200rpx;
        height: 200rpx;
      }
      .name {
        text-align: center;
        font-size: 38rpx;
      }
    }
    .user_content {
      flex-basis: 100%;
      padding: 10px 0;
    }
  }
}
</style>
